<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Inner Page - Arsha Bootstrap Template</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link th:href="@{/static/img/favicon.png}" rel="icon">
  <link th:href="@{/static/img/apple-touch-icon.png}" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Jost:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i">

  <!-- Vendor CSS Files -->
  <link th:href="@{/vendor/aos/aos.css}" rel="stylesheet">
  <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/vendor/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet">
  <link th:href="@{/vendor/boxicons/css/boxicons.min.css}" rel="stylesheet">
  <link th:href="@{/vendor/glightbox/css/glightbox.min.css}" rel="stylesheet">
  <link th:href="@{/vendor/remixicon/remixicon.css}" rel="stylesheet">
  <link th:href="@{/vendor/swiper/swiper-bundle.min.css}" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link th:href="@{/css/style.css}" rel="stylesheet">
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top header-inner-pages">
    <div class="container d-flex align-items-center">

      <h1 class="logo me-auto"><a href="index.html">Arsha</a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo me-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto " href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#services">Services</a></li>
          <li><a class="nav-link   scrollto" href="#portfolio">Portfolio</a></li>
          <li><a class="nav-link scrollto" href="#team">Team</a></li>
          <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 2</a></li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
            </ul>
          </li>
          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
          <li><a class="getstarted scrollto" href="#about">Get Started</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

    <!-- ======= Breadcrumbs ======= -->
    <section id="breadcrumbs" class="breadcrumbs">
      <div class="container">

        <ol>
          <li><a href="index.html">Home</a></li>
          <li>Inner Page</li>
        </ol>
        <h2>Inner Page</h2>

      </div>
    </section><!-- End Breadcrumbs -->










    <section class="inner-page">
      <div class="container">
        <h4>快速生成Hive建表SQL，快来试试吧！</h4>
        <hr>

        <form id="id_form">

          <div class="form-group">
            <label>数据库</label>
            <input type="text" class="form-control" name="databaseName" placeholder="databaseName">
          </div>
          <div class="form-row">
            <div class="col">
              <label>表名称</label>
              <input type="text" class="form-control" name="tabName" placeholder="tabName">
            </div>
            <div class="col">
              <label>表注释</label>
              <input type="text" class="form-control" name="tabComment" placeholder="tabComment">
            </div>
            <div class="col">
              <label>表类型</label>
              <select class="form-control" name="tabType" id="tabType">
                <option>INTERIOR</option>
                <option>EXTERNAL</option>
                <option>TEMPORARY</option>
              </select>
            </div>
          </div>

          <br>
          <div class="form-row">
            <div class="col">
              <label>分区字段名</label>
              <input type="text" class="form-control" name="parColumn" placeholder="parColumn">
            </div>
            <div class="col">
              <label>分区字段描述</label>
              <input type="text" class="form-control" name="parComm" placeholder="parComm">
            </div>
            <div class="col">
              <label>分区字段类型</label>
              <select class="form-control" name="parType">
                <option>STRING</option>
                <option>INT</option>
                <option>BIGINT</option>
                <option>DATE</option>
                <option>TIMESTAMP</option>
                <option>BOOLEAN</option>
              </select>
            </div>
          </div>

          <br>
          <div class="form-row">
            <div class="col">
              <label>分隔符</label>
              <input type="text" class="form-control" name="delimited" value=",">
            </div>
            <div class="col">
              <label>存储类型</label>
              <select class="form-control" name="storeType">
                <option>TEXTFILE</option>
                <option>SEQUENCEFILE</option>
                <option>RCFILE</option>
                <option>ORC</option>
              </select>
            </div>
            <div class="col">
              <label>HDFS路径</label>
              <input type="text" class="form-control" name="hdfsPath" disabled value="" id="hdfsPath">
            </div>
          </div>
          <hr/>

          <table class="table table-hover">
            <thead class="thead-light">
            <tr>
              <th scope="col">#</th>
              <th scope="col">名称</th>
              <th scope="col">类型</th>
              <th scope="col">注释</th>
            </tr>
            </thead>
            <tbody id="id_tbody">
            <tr>
              <th scope="row">1</th>
              <td><input type="text" style="" class="form-control" id="columnName1" name="columnName" value="name1" required></td>
              <td>
                <select id="columnType1" class="form-control" name="columnType" required>
                  <option>STRING</option>
                  <option>INT</option>
                  <option>BIGINT</option>
                  <option>DATE</option>
                  <option>TIMESTAMP</option>
                  <option>BOOLEAN</option>
                </select>
              </td>
              <td><input type="text" style="" class="form-control" id="columnComment1" name="columnComment" value=" " required></td>
            </tr>
            </tbody>
          </table>
          <button type="reset" class="btn btn-outline-primary">重置</button>
          <button type="button" class="btn btn-outline-primary" id="addVal">添加字段</button>
          <button type="button" class="btn btn-outline-primary" id="deleteVal">删除字段</button>
          <button type="button" class="btn btn-outline-primary" id="previewSql">预览SQL</button>
          <button type="button" class="btn btn-outline-primary" style="float: right" id="submitVal" disabled="disabled">生成SQL</button>
        </form>

        <br>
        <p class="text-justify" style="white-space: pre;position: relative" id="id_text" ></p>
        <textarea id="inputs" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10"></textarea>
        <button type="button" class="btn btn-secondary btn-sm" style="visibility: hidden" id="id_copy">Copy</button>
      </div>
    </section>







  <hr>
    <div class="footer-top">
      <div class="container">
        <div class="row">

          <div class="col-lg-3 col-md-6 footer-contact">
            <h3>Arsha</h3>
            <p>
              A108 Adam Street <br>
              New York, NY 535022<br>
              United States <br><br>
              <strong>Phone:</strong> +1 5589 55488 55<br>
              <strong>Email:</strong> info@example.com<br>
            </p>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Web Design</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Web Development</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Product Management</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Marketing</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Graphic Design</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Social Networks</h4>
            <p>Cras fermentum odio eu feugiat lide par naso tierra videa magna derita valies</p>
            <div class="social-links mt-3">
              <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
              <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
              <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
              <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
              <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="container footer-bottom clearfix">
      <div class="copyright">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
      <div class="credits"></div>
    </div>
  </footer><!-- End Footer -->

  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script th:src="@{/vendor/aos/aos.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{/vendor/isotope-layout/isotope.pkgd.min.js}"></script>
    <script th:src="@{/vendor/php-email-form/validate.js}"></script>
    <script th:src="@{/vendor/swiper/swiper-bundle.min.js}"></script>
    <script th:src="@{/vendor/waypoints/noframework.waypoints.js}"></script>

    <!-- Template Main JS File -->
    <script th:src="@{/js/main.js}"></script>

    <!-- BootStrap -->
  <!--<script th:src="@{/js/jquery-2.1.0.min.js}"></script>-->
  <script th:src="@{/js/jquery-3.5.1.js}"></script>


  <script type="text/javascript">
    $(document).ready(function () {
      $("#submitVal").click(function () {
        /*获取表单数据*/
       /* var columnName1 = $('#columnName1').val();
        var columnType1 = $('#columnType1').val();
        var columnComment1 = $('#columnComment1').val();*/
        var data = $("#id_form").serializeArray();
        console.log(data);
        $.ajax({
          type: "GET",//提交数据的方法类型
          dataType: "json",//服务器返回的数据类型
          url: "/generate" ,//后台接收参数的文件地址
          /*data: {"columnName1":columnName1,"columnType1":columnType1,"columnComment1":columnComment1},*/
          data: data,
          success: function (result) {
            console.log(result);//打印服务端返回的数据(调试用)
            if (result.resultCode == 200) {
              alert(result.status)
            }else{
              alert(result.status)
            }
            ;
          },
          error : function() {
            alert("异常！");
          }
        });
      });

      /*添加字段*/
      $("#addVal").click(function () {
        /*设置row行编号递增*/
        var rownum = parseInt($("#id_tbody tr:last th").html());
        rownum = rownum + 1;
        var temp = `
            <tr>
              <th scope="row">${rownum}</th>
              <td><input type="text" style="" class="form-control" name="columnName" value="name${rownum}" required></td>
              <td>
                <select class="form-control" name="columnType" required>
                  <option>STRING</option>
                  <option>INT</option>
                  <option>BIGINT</option>
                  <option>DATE</option>
                  <option>TIMESTAMP</option>
                  <option>BOOLEAN</option>
                </select>
              </td>
              <td><input type="text" style="" class="form-control" name="columnComment" value=" " required></td>
            </tr>
        `;
        $("#id_tbody").append(temp)
      })
      /*删除字段*/
      $("#deleteVal").click(function () {
        $("#id_tbody tr:last").remove()
      })
      /*判断是否选择EXTERNAL*/
      $("#tabType").bind('input propertychange',function () {
        if ($("#tabType").val() == "EXTERNAL"){
          console.log("EXTERNAL");
          $("#hdfsPath").removeAttr('disabled');
        }else {
          $("#hdfsPath").attr("disabled","disabled")
        }
      });
      /*预览SQL*/
      $("#previewSql").click(function () {
        $("#id_text").html("");
        console.log("preview SQL");
        var data = $("#id_form").serializeArray();
        $.ajax({
          type: "GET",
          dataType: "json",
          url: "/preview",
          data: data,
          success: function (result) {
            console.log(result);//打印服务端返回的数据(调试用)
            var sql = result.previewSql;
            console.log(sql);//打印服务端返回的数据(调试用)
            if (result.resultCode === 200) {
              $("#id_text").append(sql);
              $("#id_copy").removeAttr("style")
            }else{
              alert(result.status)
            }
          },
          error : function() {
            alert("异常！");
          }
        });
      })
      /*复制SQL*/
      $("#id_copy").click(function () {
        var texts = document.getElementById("id_text").innerText;
        var inputs = document.getElementById("inputs");
        inputs.value = texts;
        inputs.select();
        document.execCommand("copy");
      })
    })

  </script>

</body>
</html>